<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>验证码</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  </head>
  <style>
      #app{
        width: 100%;
        background: #f9f9f9;
        overflow: hidden;
      }
      .content{
        width: 15rem;
        margin: auto;
        margin-top: 2.8rem;
      }
      .content .text_top{
        font-size: 0.85rem;
      }
      .content .text_center{
        width: 15rem;
        height: 0.7rem;
        display: flex;
        margin-top: 1.25rem;
        font-size: 0.7rem;
      }
      .content .text_center .time{
        color: #0a87ff;
        border-bottom: 0.025rem solid #0a87ff;
        width: 1.05rem;
        height: 0.7rem;
        font-size: 0.6rem;
        margin-left: 9.45rem;
      }
      .content .input_box{
        height: 2rem;
        margin-top: 2rem;
        display: flex;
      }

      .content .input_box img{
        width: 0.7rem;
        height: 0.7rem;
      }
      .content .input_box #tel_box{
        width: 14rem;
        height: 0.7rem;
        font-size: 0.7rem;
        margin-left: 0.25rem;
        display: flex;
      }
      .content .input_box #tel_box input{
        width: 4.15rem;
        height: 0.7rem;
        color: #0a87ff;
        text-shadow: 0px 0px 0px #000;
        -webkit-text-fill-color: #666;
      }
      input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #b2b2b2;
        /* placeholder字体大小 */
        font-size: 0.7rem;
        /* placeholder字间距  */
        letter-spacing: 0rem;
      }
      .content .span_box{
        display: flex;
      }
      .content .span_box  span{
        display: block;
        width: 2.65rem;
        height: 0.05rem;
        background-color: #cecece;
        margin-right: 1.48rem;
      }
      .content .span_box .last{
        margin-right: 0rem!important;
      }
      .content .register_login{
        width: 15rem;
        height: 1.88rem;
        line-height: 1.88rem;
        text-align: center;
        font-size: 0.85rem;
        color: #fff;
        letter-spacing: 0.05rem;
	      border-radius: 0.25rem;
        margin-top: 3.45rem;
        background-image: #cecece;
        background-color: #cecece;
      }
      .content .agree{
        width: 11.7rem;
        height: 0.55rem;
        line-height: 0.55rem;
        text-align: center;
        margin: 0.95rem 0 0 1.6rem;
        font-size: 0.55rem;
        color: #999;
        display: flex;
      }
      .content .agree .checkbox{
        width: 0.48rem;
        height: 0.48rem;
        margin-right: 0.23rem;
        border: 0.01rem solid #cecece;
        margin-top: 0.03rem;
        font-size: 0.3rem;
        line-height: 0.48rem;
        text-align: center;
        color: #999;
      }
      .content .agree .st{
        color: #099ffe;
      }
  </style>
  <body>
  <div id="app">
      <div class="content">
        <div class="text_top">验证码已发送至</div>
        <div class="text_center">
            13221092349
          <div class="time">49s</div>
        </div>
        <div class="input_box">
          <img src="../../image/yaoshi.png" alt="" v-show="isShow">
          <div id="tel_box">
            <input type="tel" placeholder="请输入验证码" maxlength="1" ref="refcode" @input="vaitail" autofocus="autofocus">
            <input type="tel" maxlength="1" @input="vaitail_two">
            <input type="tel" maxlength="1" @input="vaitail_thr">
            <input type="tel" maxlength="1" @input="vaitail_fou">
          </div>
        </div>
        <div class="span_box">
          <span class="first" ref="refcolor_one"></span>
          <span class="second" ref="refcolor_two"></span>
          <span class="third" ref="refcolor_thr"></span>
          <span class="last" ref="refcolor_fou"></span>
        </div>
        <div class="register_login" ref="refcolor_login" @click="goto('footer','footer/index_footer','')">
          注册/登录
        </div>
        <div class="agree">
          <div class="checkbox" @click="agreeclick"><span v-show="agree_show">√</span></div>注册代表您同意<span class="st">《盛通麻将》</span>APP服务协议
        </div>

      </div>
  </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-slide.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
      onload = function(){
               var txts = tel_box.getElementsByTagName("input")
               for(var i = 0; i<txts.length;i++){
                   var t = txts[i];
                   t.index = i;
                   t.setAttribute("readonly", true);
                   t.onkeyup=function(){
                       this.value=this.value.replace(/^(.).*$/,'$1');
                       var next = this.index + 1;
                       if(next > txts.length - 1) return;
                       txts[next].removeAttribute("readonly");
                       txts[next].focus();
                   }
               }
               txts[0].removeAttribute("readonly");
           };
      new Vue({
        el: '#app',
        data: {
          mobile:"",
          isShow:true,
          value:'',
          agree_show:true,
          goName:["0"]
        },
        methods:{
          // 当点击输入框的时候，图片和input位置变化
          vaitail:function(){
            console.log( this.$refs.refcode.value)
            var phone_number = this.$refs.refcode.value.length;
            // console.log(phone_number)
            if(phone_number>0){
              this.isShow=false;
              this.$refs.refcode.style.marginLeft="0.95rem"
            }
          },
          // 点击第二个input,下boder颜色变化
          vaitail_two:function(){
            this.$refs.refcolor_one.style.backgroundColor="#cecece";
            this.$refs.refcolor_two.style.backgroundColor="#0a87ff";
          },
          // 点击第三个input,下boder颜色变化
          vaitail_thr:function(){
            this.$refs.refcolor_two.style.backgroundColor="#cecece";
            this.$refs.refcolor_thr.style.backgroundColor="#0a87ff";
          },
          // 点击第四个input,下boder颜色变化
          vaitail_fou:function(){
            this.$refs.refcolor_thr.style.backgroundColor="#cecece";
            this.$refs.refcolor_fou.style.backgroundColor="#0a87ff";
            this.$refs.refcolor_login.style.backgroundImage="linear-gradient(90deg, #3290c6 0%, #1e8ce3 0%, #0a87ff 0%, #5fc2b8 100% ),linear-gradient(	#cecece,	#cecece	)";
            Vue.set(this.goName,0,'1')
          },
          // 对号勾选框的变化
          agreeclick:function(){
            this.agree_show=!this.agree_show
          },
          goto:function(name,page,type){
            if(this.goName>0){
              api.openWin({
                  name: name,
                  url: '../index/index.html',
                  pageParam: {
                    name: page,
                    type:type
                  }
              });
            }

          }
        }
      })

  </script>
  </html>
